<template>
  <div class="table-box">
    <el-row
      class="line-row"
      :style="`overflow:${
        height != '0' && !componentData.fixHead ? 'auto' : 'visible'
      }`"
      v-loading="tableLoading"
    >
      <el-table
        :span-method="arraySpanMethod"
        :height="height === '0' || !componentData.fixHead ? null : height"
        @header-dragend="changeWidth"
        :data="commonTableData"
        class="nodeTable"
      >
        <template
          v-for="(propItem, propIdx) in commonTablePropList"
          :key="Math.random() + '' + propItem.label"
        >
          <recurveColumn
            :commonTableData="commonTableData"
            :col="propItem"
            :index="propIdx"
          ></recurveColumn>
        </template>
      </el-table>
    </el-row>
  </div>
</template>

<script>
import nt from '../../../../../network'
import recurveColumn from './recurveColumn.vue'
import parseApi from '../../../../utils/parseApi'
import { defaultTableColumnOptions } from '../../../../data/variable'

export default {
  name: 'custom-report-component-table-table',
  components: {
    recurveColumn,
  },
  props: {
    api: {},
    method: {
      type: String,
      default: 'get',
    },
    height: {},
    dataKey: {},
    mainTitle: {},
    time: {},
    componentData: {},
    changeSize: {},
    changeData: {},
    interval: {},
    mixinParam: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  computed: {
    tableData() {
      return this.commonTableData
    },
  },
  data() {
    return {
      comInterval: 0,
      tableLoading: false,
      isDataReady: false,
      nodeData: [],
      table: {},
      commonTablePropList: [],
      commonTableData: [],
      circles: [
        {
          background: '#F46E6E',
          border: '1px solid #F46E6E',
        },
        {
          background: '#419EFF',
          border: '1px solid #419EFF',
        },
        {
          background: '#F7A54C',
          border: '1px solid #F7A54C',
        },
        {
          background: '#25CCA7',
          border: '1px solid #25CCA7',
        },
      ],
    }
  },
  methods: {
    changeWidth(newWidth, oldWidth, column, event) {},
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      let str = this.componentData.span || '0,0,0,0'
      let spanArr = str.split(';').map((item) => {
        let arr = item.split(',')
        return {
          rowIndex: +arr[0] || 0,
          columnIndex: +arr[1] || 0,
          rowSpan: +arr[2] || 1,
          columnSpan: +arr[3] || 1,
        }
      })
      for (let item of spanArr) {
        if (rowIndex === item.rowIndex && columnIndex === item.columnIndex) {
          return [item.rowSpan, item.columnSpan]
        }
        if (
          rowIndex < item.rowIndex + item.rowSpan &&
          columnIndex < item.columnIndex + item.columnSpan
        ) {
          if (rowIndex >= item.rowIndex && columnIndex >= item.columnIndex) {
            return [0, 0]
          }
        }
      }
      // return [1,1]
    },
    parseTableData(newApi) {
      let labelList = []
      let data = this.table
      //编排页表格配置从接口数据初始化，预览页从配置好的数据获取
      if (!this.componentData.tableColData || newApi) {
        if (data.valueList.length) {
          for (let key in data.valueList[0]) {
            if (data.valueList[0].hasOwnProperty(key)) {
              labelList.push({
                ...defaultTableColumnOptions,
                label: key,
                prop: key,
              })
            }
          }
        }
        this.$emit( 'changeTableProp', labelList)
        this.commonTablePropList = labelList
        this.componentData.tableColData = labelList
      } else {
        this.commonTablePropList = this.componentData.tableColData
      }
      this.commonTableData = data.valueList
      this.tableLoading = false
      if (!this.isDataReady) {
        this.isDataReady = true
        this.$emit( 'dataReady')
      }
    },
    getCommonTableData(newApi) {
      this.tableLoading = true

      if (!this.api || !this.api.reqUrl) {
        let data = {
          //表格数据
          valueList: [
            //表格body内数据，valueList长度影响表格行数
            {
              //每行数据的数值，key的数量影响列数，初始化key值为每列的label
              date: '2016-05-02', //行内单元格的具体数据
              name: {
                value: '王小虎',
                status: 'success',
              },
              province: '上海',
              city: '普陀区',
              address: '上海市普陀区金沙江路 1518 弄',
              zip: 200333,
              tag: '家',
            },
            {
              date: '2016-05-04',
              name: {
                value: '王小虎',
                status: 'success',
              },
              province: '上海',
              city: '普陀区',
              address: '上海市普陀区金沙江路 1517 弄',
              zip: 200333,
              tag: '公司',
            },
            {
              date: '2016-05-04',
              name: '王小虎',
              province: {
                value: '上海',
                status: 'danger',
              },
              city: '普陀区',
              address: '上海市普陀区金沙江路 1517 弄',
              zip: 200333,
              tag: '公司',
            },
            {
              date: '2016-05-04',
              name: '王小虎',
              province: '上海',
              city: '普陀区',
              address: '上海市普陀区金沙江路 1517 弄',
              zip: 200333,
              tag: '公司',
            },
            {
              date: '2016-05-04',
              name: '王小虎',
              province: '上海',
              city: '普陀区',
              address: '上海市普陀区金沙江路 1517 弄',
              zip: 200333,
              tag: '公司',
            },
            {
              date: '2016-05-04',
              name: '王小虎',
              province: '上海',
              city: '普陀区',
              address: '上海市普陀区金沙江路 1517 弄',
              zip: 200333,
              tag: '公司',
            },
            {
              date: '2016-05-04',
              name: '王小虎',
              province: '上海',
              city: '普陀区',
              address: '上海市普陀区金沙江路 1517 弄',
              zip: 200333,
              tag: '公司',
            },
          ],
        }
        this.table = data
        this.parseTableData()
      } else {
        nt.doRequest({
          method: 'post',
          uri: '/paas/chart-layout/v1/compdsconfig/testCompDSConfig',
          data: parseApi({
            api: this.api,
            time: this.time,
            mixinParam: this.mixinParam,
          }),
          onSuccess: (resp) => {
            let data = resp.data.content.content
            if (!data || JSON.stringify(data) === '{}') {
              data = {
                valueList: [],
              }
            }
            this.table = data
            this.parseTableData(newApi)
          },
          onError: () => {
            this.table = {
              valueList: [],
            }
            this.parseTableData(newApi)
          },
        })
      }
    },
    changeParam() {
      if (this.api) {
        this.getCommonTableData()
        clearInterval(this.comInterval)
        if (this.interval) {
          this.comInterval = setInterval(() => {
            this.getCommonTableData()
          }, this.interval * 1000)
        }
      }
    },
  },
  watch: {
    'api.dsName': function () {
      this.getCommonTableData(true)
    },
    componentData() {
      this.parseTableData()
    },
    time() {
      this.changeParam()
    },
    mixinParam: {
      handler: function (val, oldVal) {
        let int = 0
        int = setInterval(() => {
          if (!this.tableLoading) {
            clearInterval(int)
            this.changeParam()
          }
        }, 50)
      },
      deep: true,
    },
    // changeData() {
    //   if (this.interval) {
    //     this.getCommonTableData(true)
    //   }
    // }
  },
  mounted() {
    this.getCommonTableData()
    if (this.interval) {
      this.comInterval = setInterval(() => {
        this.getCommonTableData()
      }, this.interval * 1000)
    }
  },
  beforeDestroy() {
    clearInterval(this.comInterval)
  },
  emits: ['changeTableProp', 'dataReady'],
}
</script>

<style scoped>
.circle {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-top: 6px;
}
.line-row {
  width: 100%;
  height: 100%;
}
.table-box {
  width: 100%;
  height: 100%;
  position: relative;
}
.operatorBtn {
  position: absolute;
  top: -50px;
  right: 20px;
  width: 30px;
  height: 20px;
  font-size: 14px;
  font-family: PingFangSC-Medium;
  color: #419eff;
  line-height: 20px;
}
.table-box .el-table::before {
  opacity: 0;
}
</style>
